<template>
	<div class="wy-main user-contact">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<div class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span">成员管理</span>
					<div class="title-right">
						<a-button type="primary" @click="showModal" class="h-30">成员添加</a-button>
					</div>
					<a-divider class="title-divider"  />
				</div>
			</a-col>
		</a-row>
		<div class="my-main-cont">
			<a-table :columns="columns" :dataSource="data" :rowKey="record => record.userId" style="margin-top: 10px;">
				<span slot="operation" slot-scope="text, record">
			      <a href="javascript:;">修改</a>
			      <a-divider type="vertical" />
			      <a href="javascript:;" @click="delUser(record)">删除</a>
			    </span>
			</a-table>
			<div class="tips">提醒：以下联系人都可设置为消息接收人，物流云不会将这些信息对外披露或向第三方提供。</div>
		</div>
		<a-modal
	      	title="添加成员管理"
	      	:visible="visible"
	        @cancel="handleCancel"
	        width="750px"
	      	:footer="null" class='add-man-model'>
	          <a-form :form="form" @submit="handleSubmit">
	                    <a-row>
	                         <a-col :span='12' class='ela-220'>
	                            <a-form-item label="人员姓名" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
	                              <a-input v-decorator="['nickName',{rules: [{ required: true, message: '请输入真实姓名!' }]}]" placeholder='请填写联系人姓名'/>
	                           </a-form-item>
	                         </a-col>
	                  
	                        <a-col :span='12' class='ela-220'>
	                            <a-form-item label="联系方式：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
	                              <a-input v-decorator="['mobile',{rules: [{ required: true, message: '请输入手机号!' },{validator: checkMobile}]}]" placeholder='请填写联系方式' />
	                           </a-form-item> 
	                        </a-col>
	                    </a-row>
	                    <a-row>
	                         <!-- <a-col :span='12' class='ela-220'>
	                            <a-form-item label="名称：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
	                              <a-input v-decorator="['note',{rules: [{ required: true, message: 'Please input your note!' }]}]" placeholder='外部联系人(默认)'/>
	                           </a-form-item>
	                         </a-col> -->
	                        <a-col :span='12' class='ela-220'>
	                            <a-form-item label="邮箱:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
	                              <a-input v-decorator="['email',{rules: [{ required: true, message: '请输入邮箱!' },{validator: checkMail}]}]" placeholder='请填写QQ邮箱'/>
	                           </a-form-item>
	                        </a-col>
	                    </a-row>
	                    <a-row class='ant-lable-button'>
	                        <a-button  class='ant-btn-green'  html-type="submit">立即添加</a-button>
	                        <a-button  class='ant-btn-grey' @click="handleCancel">取消</a-button>
	                    </a-row>
	                 </a-form>
	  	</a-modal>
	</div>
</template>
<script>
	import {mapState} from 'vuex'
	import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
	
	const columns = [{
		title: '姓名',
		dataIndex: 'username',
		key: 'username',
	}, {
		title: '邮箱',
		dataIndex: 'email',
		key: 'email',
	}, {
		title: '手机',
		dataIndex: 'mobile',
		key: 'mobile',
	}, {
		title: '职位',
		key: 'deptName',
		dataIndex: 'deptName',
	}, {
		title: '操作',
		key: 'operation',
		scopedSlots: {
			customRender: 'operation'
		},
	}];
	export default {
		data() {
			return {
				data:[],
				columns,
				visible: false,
				loading: false
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		computed: {
		    ...mapState({
		      user: state => state.account.user,
		    })
		},
		created () {
			this.getMembers();
		},
		methods: {
			// 校验手机号
			checkMobile:checkTel,
			// 校验邮箱
			checkMail:checkEmail,

			// 提交保存
			handleSubmit(e) {
				if(this.loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						values.type = 1;
						this.$post('/members', values, true).then((r) => {
							if(r.status == 200) {
								this.$message.success(r.data.message);
								this.handleCancel();
								this.getMembers();
							}
							this.loading = false;
						}).catch((e) => {
							this.loading = false;
						})
					}
				});
			},
		    // 展示模态框
			showModal() {
			    this.visible = true;
			},
		    handleCancel(e) {
		        this.visible = false
		    },
			// 获取成员管理
			getMembers() {
				this.$get('/members',{
					pageSize: 10,
					pageNum: 1,
				}).then((r) => {
					this.data = r.data.data.rows
	            }).catch((e) => {})
			},
			//删除成员
			delUser(data) {
				
				let that = this
				this.$confirm({
					title: '确定删除所选中的记录',
					content: '当您点击确定按钮后，这些记录将会被彻底删除',
					centered: true,
					onOk() {
						let logIds = []
						logIds.push(data.userId)
						that.$delete('/members/' + logIds.join(',')).then(() => {
							that.$message.success('删除成功')
							that.getMembers()
					
					})
						}
				})
			},
			// 检测确认密码
			handleConfirmBlur(e) {
				const value = e.target.value;
				this.confirmDirty = this.confirmDirty || !!value;
			},
			// 检测确认密码
			compareToFirstPassword(rule, value, callback) {
				const form = this.form;
				if(value && value !== form.getFieldValue('password')) {
					callback('您输入的两个密码不一致!');
				} else {
					callback();
				}
			},
			// 检测密码
			validateToNextPassword(rule, value, callback) {
				const form = this.form;
				if(value && this.confirmDirty) {
					form.validateFields(['confirm'], {
						force: true
					});
				}
				callback();
			},
		}
	}
</script>

<style lang="less" scoped>
	.user-contact {
		.tips {
			padding: 10px;
			margin-top: 10px;
		}
	}
</style>
